<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="tag-list-box">
        <div class="tag-list-label" v-if="title">{{ title }}</div>
        <div class="tag-list-info">
            <ul class="tag-list-ul">
                <template v-for="item in renderList">
                    <li
                        class="tag-list-li"
                        @click="handleItemClick(item)"
                        :class="{ active: active === item.value }"
                        :key="item.value"
                    >
                        <el-button :type="active === item.value ? 'primary':'info'" round>
                            {{item.label || ""}}
                        </el-button>
                    </li>
                </template>
                <template v-if="list.length >= 8">
                    <li class="tag-list-li no-drag">
                        <el-button plain type="info" @click="toggoleMore" round>
                            <template v-if="!showMore">
                                展开更多<i class="el-icon-d-arrow-right"></i>
                            </template>
                            <template v-else>
                                收起更多<i class="el-icon-d-arrow-left"></i>
                            </template>
                        </el-button>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Prop, Emit } from "vue-property-decorator";

@Component
export default class TagList extends Vue {
    @Prop({
        type: String,
        default: ""
    })
    readonly title!: string;

    @Model("change", { type: [String, Number] })
    readonly active!: string | number;

    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any | any[];

    @Prop({
        type: Boolean,
        default: false
    })
    readonly required!: boolean;

    @Emit("item-click")
    handleItemClick(item: any) {
        if (this.active === item.value) {
            if (!this.required) {
                this.$emit("change", "");
            }
            return item;
        };
        this.$emit("change", item.value);
        return item;
    }

    showMore = false;

    get renderList() {
        if (this.showMore) {
            return this.list;
        } else {
            return this.list.slice(0, 8);
        }
    }

    toggoleMore() {
        this.showMore = !this.showMore;
    }
}
</script>
